<!--  -->
<template>
  <div class="">
    <el-card style="margin: 20px 0px">
      <CategorySelect @getCategoryId="getCategoryId" :show="!isShowTable"></CategorySelect>
    </el-card>
    <el-card>
      <div v-show="isShowTable">
        <el-button   type="primary" :disabled="!category3Id" @click="addAttr"  icon="el-icon-plus" >
          添加属性
        </el-button>
        <!-- 表格：展示平台属性  -->
        <el-table :data="attrList" border style="width: 100%; margin: 20px 0px">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150">
          </el-table-column>
          <el-table-column prop="prop" label="属性值列表" width="width">
            <template slot-scope="{ row, $index }">
              <el-tag
                type="success"
                v-for="(attrValue, index) in row.attrValueList"
                style="margin: 0px 20px"
                :key="attrValue.id"
              >
                {{ attrValue.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="200">
            <template slot-scope="{ row, $index }">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="updateAttr(row)"
                >修改</el-button
              >
              <el-button type="danger" icon="el-icon-delete" size="mini">
                删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加|修改属性的解构 -->
      <div v-show="!isShowTable">
        <!-- 开始收集表单的数据存放在attrInfo -->
        <el-form :inline="true" ref="form" label-width="80px" :model="attrInfo">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName">
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue" :disabled="!attrInfo.attrName">
          添加属性值
        </el-button>
        <el-button @click="isShowTable = true">取消</el-button>
        <!-- 添加数据 如 颜色 红色 蓝色 青色 。。。 -->
        <el-table
          style="width: 100%; margin: 20px 0px"
          :data="attrInfo.attrValueList"
          border
        >
          <el-table-column
            align="center"
            label="序号"
            width="80px"
            type="index"
          ></el-table-column>
          <el-table-column label="属性值名称" prop="prop" width="width">
            <template slot-scope="{row,$index}" >
              <!-- 这里结构需要用到span与input进行来回切换  $index拿到点击的索引值-->
              <el-input v-model="row.valueName"  @keyup.native.enter="toLook(row)"
               @blur="toLook(row)"  :ref="$index" v-if="row.flag" placeholder="请输入属性值名称吧迷人的老Baby" size="mini"></el-input>
              <span v-else @click="toEdit(row,$index)"  style="display:block">{{ row.valueName }}</span>
              </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="width"
            prop="propo"
          >
            <template slot-scope="{row,$index}">
                <template>
                  <el-popconfirm
                    :title="`确定删除${row.valueName}?`" @onConfirm="deleteAttrValue($index)"
                  >
                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
                  </el-popconfirm>
                </template>
        
              </template>
        </el-table-column>
        </el-table> 
        <el-button type="primary" @click="addOrUpdateAttr" :disabled="attrInfo.attrValueList.length<1">保存</el-button>
        <el-button @click="isShowTable = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep';
export default {
  name: "Attr",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      //接受平台属性的字段
      attrList: [],
      isShowTable: true, //添加按钮的显示与隐藏
      //收集新增属性|修改属性使用的
      attrInfo: {
        attrName: "", //属性名
        attrValueList: [
          //属性值，因为属性值可以有多个因此用数组，每一个属性值都是一个对象需要attrId,valueName
        ],
        categoryId: 0, //三级分类的id
        categoryLevel: 0, //因为服务器也需要区分几级id
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //子给父亲传递需要自定义组件
    getCategoryId({ categoryId, level }) {
      //区分三级分类相应的id，以及父组件进行存储
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        //向服务器发送请求
        this.getAttrList();
      }
    },
    //获取平台属性数据
    //确定好三级分类的数据，向服务器发送请求获取平台属性进行展示
    async getAttrList() {
      //获取分类的ID
      const { category1Id, category2Id, category3Id } = this;
      let result = await this.$API.attr.reqAttrList(
        category1Id,
        category2Id,
        category3Id
      );

      if (result.code == 200) {
        this.attrList = result.data;
      }
    },
    //添加属性
    addAttrValue(){
        //向属性值里面添加元素
        //attrId    相应属性的id
        //valueName : 属性值的名称
        this.attrInfo.attrValueList.push({
            //修改某个属性，在已有的属性基础上新增属性值
            //新增属性值的时候，需要把已有的属性id带上
            attrId:this.attrInfo.id, 
            valueName:'',
            flag:true,
        })
        //flag属性：给每一个属性值添加一个标记flag，用户切换查看模式与编辑模式，好处是每一哥属性值可以控制自己的模式切换
        //当前flag属性，响应式数据（数据变化视图跟着变化）

        //默认最后一个元素聚焦
       this.$nextTick(()=>{
        //获取相应的input表单元素实现聚焦
        this.$refs[this.attrInfo.attrValueList.length-1].focus();
      })
    },
    //添加属性前需要清空
    addAttr(){
        //切换table显示与隐藏
        this.isShowTable = false;
        //清除数据
        this.attrInfo = {
        attrName: "", //属性名
        attrValueList: [],
        categoryId: this.category3Id, 
        categoryLevel:3, 
      }
    },
    //修改
    updateAttr(row){
      this.isShowTable=false;
      //由于数据结构当中存在对象里面套数组，数组里面又套对象
      //所以不能直接给attrInfo.attrValueList赋值，需要进行深拷贝
      this.attrInfo = cloneDeep(row);
      //在修改某一个属性的时候，将相应的属性值  加上flag标记
      this.attrInfo.attrValueList.forEach(item=>{
        //这样的写法，flag属性就变成了响应式数据（数据变化视图跟着变化）
        //因为Vue无法探测普通的新增，property，这样书写的属性并非响应式（数据变化视图跟着变化——
       //this.$set(对象,添加新的响应式属性,新的属性的属性值)
        this.$set(item,'flag',false)        
      })

    },
    //查看模式关掉flag
    toLook(row){
      //如果舒心只为空，不能作为新的属性值
      if(row.valueName.trim()==''){
        this.$message('请输入一个正常属性值')
        return;
      }
      //新增属性拒绝重复值
       let isRepart = this.attrInfo.attrValueList.some(item=>{
        //需要将row从数组里面判断的时候去除
        //row最新新增的属性值
        //判断存在的数据和最新添加数据是否有相同元素，有则剔除。
        if(row != item){
          return row.valueName == item.valueName;
        }
      })
      //row: 形参是当前用户添加的最新的属性值
      //当前编辑模式变为查看模式【让input消失，显示span】
      row.flag = false;
    },
    //点击span的回调，变为编辑模式
    toEdit(row,index){
      row.flag = true;
      //获取input节点，实现自动聚焦
      //需要注意：点击span的时候，切换为input变为编辑模式，但是需要注意，对于浏览器而言，页面重绘与重拍耗时间
      //点击span的时候，重绘重拍一个input它是需要耗费时间，因此我们不可能一点击span立马获取到input
      //$nextTick,当节点渲染完毕了，会执行一次
      this.$nextTick(()=>{
        //获取相应的input表单元素实现聚焦
        this.$refs[index].focus();
      })
    } ,
    //删除
    deleteAttrValue(index){
      //当前删除属性值的操作是不需要发请求的 .splice(删除的索引，删除的数量)
      this.attrInfo.attrValueList.splice(index,1);
    },
    //保存按钮：进行添加属性或者修改属性的操作
    async addOrUpdateAttr(){
      //整理参数1，如果用户输入太多空的数组
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item=>{
        //过滤掉属性值不是空的
        if(item.valueName != ''){
          //删除掉flag属性
          delete item.flag;
          return true;
        }
      })
      try{
        //发请求
        await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
        //展示平台属性的信号值
        this.isShowTable = true;
        this.$message({type:'success',message:'保存成功'});
        //保存成功以后需要再次获取到平台属性进行展示
        this.getAttrList();
      }catch(err){
        // this.$message('保存失败')
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
